<template>
  <div class="app">
    <h1>{{msg}}</h1>
    <!-- 通过父组件给子组件传递函数类型的 props 实现：子给父传递数据 -->
    <School :getSchoolName="getSchoolName"/>

    <!-- 通过父组件给子组件绑定自定义事件实现：子给父传递数据(第一种写法 使用 v-on 或 @) -->
    <!-- <Student v-on.once:lingchen="getStudentName"/> -->
    <Student v-on:lingchen="getStudentName" @click.native="show"/>
    <!-- 通过父组件给子组件绑定自定义事件实现：子给父传递数据(第二种写法 使用 ref -->
    <!-- <Student ref="student"/> -->
  </div>
</template>

<script>
  // 引入组件 
  import Student from './components/Student' 
  import School from './components/School'
  export default {
    name:'App',
    components: { Student, School} ,
    data(){
      return {
        msg:'你好啊！'
      }
    },
    methods: {
      getSchoolName(name){
        console.log("App 收到了学校名:", name)
      },
      getStudentName(name){
        console.log("App 收到了学生名:", name)
      },
      show(){
        alert('组件使用原生事件 click')
      }
    },
    mounted() {
      // this.$refs.student.$on('lingchen', this.getStudentName) // 绑定自定义事件
      // this.$refs.student.$once('lingchen', this.getStudentName)// 绑定自定义事件(一次性)
    },
  }
</script>

<style>
  .app{
    background-color: gray;
    padding: 5px;
  }
</style>
